<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/vue/axios.min.js"></script>
    <script src="../plugins/vue/vue-2.6.10.js"></script>


</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">商品管理</h3>
</div>

<div class="box-body" id="app">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" onclick="location.href='shangpin_add.html'"><i class="fa fa-file-o"></i> 新建</button>
                    <button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
                    <button type="button" class="btn btn-default" title="提交审核"><i class="fa fa-check"></i> 提交审核</button>
                    <button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i class="fa fa-ban"></i>屏蔽</button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i>刷新</button>
                    <button type="button" class="btn btn-default" title="导出" onclick="location.href='/shangpin/daochu'"><i class="fa fa-refresh"></i>导出</button>
                    <button type="button" class="btn btn-default" title="导入" onclick="fu()"><i class="fa fa-refresh"></i>导入</button>
                </div>
            </div>
        </div>

        <!--style="display: none"  隐藏整个form表单-->
        <form id="fm" action="/shangpin/daoru" method="post" enctype="multipart/form-data" style="display: none">
            <input type="file" name="file" id="file">
        </form>

        <div class="box-tools pull-right">
            <div class="has-feedback">
                状态：<select>
                <option value="">全部</option>
                <option value="0">未申请</option>
                <option value="1">申请中</option>
                <option value="2">审核通过</option>
                <option value="3">已驳回</option>
            </select>
                客户信息：<input type="text" placeholder="名称/分类" v-model="ming">
                <button class="btn btn-default" @click="mohu()">查询</button>
            </div>
        </div>
        <!--工具栏/-->
        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">商品编号</th>
                <th class="sorting">商品名称</th>
                <th class="sorting">价格</th>
                <th class="sorting">分类</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in shangpin">
                <td><input type="checkbox"></td>
                <td>{{item.sid}}</td>
                <td>{{item.sname}}</td>
                <td>{{item.price}}</td>
                <td>{{item.lei}}</td>
                <td class="text-center">
                    <button type="button" class="btn bg-olive btn-xs" @click="update(item.sid)">修改</button>
                    <button type="button" class="btn bg-olive btn-xs" @click="del(item.sid)">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <!--数据列表/-->
    </div>
    <!-- 分页组件 /-->
    <div class="box-footer clearfix">
        <ul class="pagination">
            <li v-on:click="getListPage(pageNo-1)">
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-on:click="getListPage(p)" :class="{active:p==pageNo}" v-for="(p,index) in pages"><a href="#">{{p}}</a>
            </li>
            <li v-on:click="getListPage(pageNo+1)">
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- ./wrapper -->
<script type="text/javascript">
    function fu() {
        $("#file").click();
        $("#file").change(function () {
            $("#fm").submit();
        });
    }
    var app = new Vue({
        el: "#app",
        data: {
            pageNo: 1,
            pageSize: 3,
            pageCount: 1,
            shangpin: [],
            ming: ""
        },
        methods: {

            getListPage: function (num) {
                var that = this;
                that.pageNo = num;

                if (that.pageNo <= 0) {
                    alert("已经是第一页");
                    that.pageNo = 1;
                }

                if (that.pageNo > that.pageCount) {
                    alert("已经是最后一页");
                    console.log("=====", that.pageCount);
                    that.pageNo = that.pageCount;
                }
                axios.get("/shangpin/findPage",
                    {
                        params: {
                            ming:that.ming,
                            pageNo: that.pageNo,
                            pageSize: that.pageSize
                        }
                    }
                ).then(function (d) {
                    that.shangpin = d.data.data.object;
                    that.pageCount = d.data.data.pageCount;
                }).catch(function (error) {
                    console.log("e=", error)
                });
            },
            del: function (val) {
                axios.get("/shangpin/del",{
                        params:{
                            sid:val
                        }
                    }
                ).then(res => {

                    alert("删除成功");
                    location.href = "shangpin_list.html"
                })
            },
            update(val) {
                location.href = "shangpin_update.html?sid=" + val;
            },
            mohu(){
                axios.get("/shangpin/findPage", {params:{
                        pageNo: this.pageNo,
                        pageSize: this.pageSize,
                        ming: this.ming
                    }
                }).then(function (d) {
                    app.shangpin = d.data.data.object;
                    app.pageCount = d.data.data.pageCount;
                });
            }

        },
        created() {

            var that = this;
            // console.log("我是钩子函数....我被执行了...");
            //在此钩子函数中获取第一页数据
            axios.get("/shangpin/findPage", {
                params: {
                    pageNo: that.pageNo,
                    pageSize: that.pageSize
                }
            }).then(function (d) {
                //console.log(d.data.data);
                that.shangpin = d.data.data.object;
                that.pageCount = d.data.data.pageCount;
            }).catch(function (error) {
                console.log("e=", error)
            });
        },
        /* 计算属性 */
        computed: {
            pages: function () {
                var list = [];
                //当前页
                var pn = this.pageNo;
                //总页数
                var pc = this.pageCount;

                if (pc <= 3) {
                    for (var i = 1; i <= pc; i++) {
                        list.push(i);
                    }
                } else {
                    if (pn <= 3) {
                        for (var i = 1; i <= 3; i++) {
                            list.push(i);
                        }
                    } else {
                        for (var i = pn - 2; i <= pn; i++) {
                            list.push(i);
                        }
                    }
                }
                return list;
            }
        }
    });
</script>

</body>

</html>